﻿<div id="dlg_SeleccionarBeneficio" title="Beneficio">
    <div class="col-sm-12">
        <div class="col-sm-12 no-padding">
            <div class="col-sm-12 no-padding">
                <label>Nivel de Beneficio</label>
                <input id="ddl_SelBenef_Nivel" data-role="dropdownlist" data-auto-bind="false" data-value-primitive="true"
                    data-bind="source: nivelesDS" data-value-field="IdNivelBeneficio" data-text-field="Nombre" style="width: 100%" />
            </div>
        </div>

        <div class="col-sm-12 no-padding">
            <label>Tipo de Beneficio:</label>

            <div class="space-4"></div>

            <div class="col-sm-12 no-padding">
                <div id="grd_SelBenef_BeneficiosList" data-role="grid" style="width: auto" data-bind="source: beneficiosDS"
                    data-column="true" data-navigatable="true" data-selectable="row" data-sortable="true"
                    data-columns='[        
                        { "field": "IdTipoBeneficio",        "title": "Id",      "hidden": "true" },
                        { "field": "Nombre",    "title": "Nombre",  "width": "99px"  },
                        { "field": "DialogWnd", "hidden": "true"  },
                    ]'>
                </div>
            </div>
        </div>

        <div class="space-4"></div>

        <div class="col-sm-12 align-center">
            <div class="space-4"></div>
            <button id="btn_SelBenef_Seleccionar" class="btn btn-sm btn-primary">Seleccionar</button>
            <button id="btn_SelBenef_Cancelar" class="btn btn-sm btn-default">Cancelar</button>
        </div>
    </div>
</div>

<script>
    var SeleccionarBeneficioVM;

    $(document).ready(function () {
        $("#dlg_SeleccionarBeneficio").on("dialogopen", function (e, ui) {
            SetSeleccionarBeneficio_ViewModel();
            SetGridMainModal_dblClick('#dlg_SeleccionarBeneficio', '#grd_SelBenef_BeneficiosList');
        });

        $('#btn_SelBenef_Cancelar').click(function () {
            $('#dlg_SeleccionarBeneficio').dialog('close');
        });
    });

    function SetSeleccionarBeneficio_ViewModel() {
        SeleccionarBeneficioVM = new kendo.observable({
            nivelesDS: AjaxParamsActionPost('@Url.Action("GetEntities", "NivelBeneficio")', { 'rowStatus': true }),
            beneficiosDS: AjaxParamsActionPost('@Url.Action("GetEntities", "TipoBeneficio")', { 'rowStatus': true })
        });

        kendo.bind('#dlg_SeleccionarBeneficio', SeleccionarBeneficioVM);
    }
</script>
